<template>
    <div class="main">
        <div class="top">
            <h1>王牌推荐</h1>
            <ul v-for="(item,index) of top" :key="index">
                <li v-if="index==0" class="top1">
                    <nav>
                        <RouterLink to="/video"><img :src="item.img"/></RouterLink>
                    </nav>
                    <span class="nm">{{ item.nm }}</span>
                    <span>{{ item.detailed }}</span>
                </li>
                <li v-else class="top2">
                    <nav>
                        <RouterLink to="/video"><img :src="item.img"/></RouterLink>
                    </nav>
                    <span class="nm">{{ item.nm }}</span>
                    <span>{{ item.detailed }}</span>
                </li>
            </ul>
        </div>
        <div class="hot">
            <p class="more">查看更多></p>
            <h1>电影-正在热映</h1>
            <ul v-for="(item,index) of hot" :key="index">
                <li v-if="index<=5">
                    <nav>
                        <RouterLink to="/video"><img :src="item.img"/></RouterLink>
                    </nav>
                    <p>{{ item.nm }}</p>
                </li>
            </ul>
        </div>
        <div class="hot">
            <p class="more">查看更多></p>
            <h1>即将上映</h1>
            <ul v-for="(item,index) of coming" :key="index">
                <li v-if="index<=5">
                    <nav>
                        <RouterLink to="/video"><img :src="item.img"/></RouterLink>
                    </nav>
                    <p>{{ item.nm }}</p>
                    <p>{{ item.showInfo }}</p>
                </li>
            </ul>
        </div>
        
    </div>
    
</template>

<script setup>
    import { ref,onMounted } from 'vue'
    import Top10  from '../assets/json/top.json'
    import TestJson  from '../assets/json/hot.json'
    import comingJson  from '../assets/json/coming.json'
    const hot = ref([])
    const coming = ref([])
    const top = ref([])
    onMounted(()=>{
        hot.value = TestJson
        coming.value = comingJson
        top.value = Top10
    })

</script>


<style scoped>

.top h1{
    font-size: 30px;
}
.top1 .nm{
    font-size: 18px;
    font-weight: 600;
    color: black;
    padding: 20px 0 5px 20px;
    display: block;
}
.top1 span{
    font-size: 14px;
    color: rgb(90, 90, 90);  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-left: 20px;
}
.top1{
    width: 41%;
    height: 60vh;
    list-style: none;
    float: left;
    margin-left: -3.5%;
    margin-right: 1.5%;
}
.top1 img{
    width: 100%;
    height: auto;
}
.top{
    width: 98%;
    height: 70vh;
    margin-left: 2%;
    margin-top: 2%;
}
.top2{
    width: 18%;
    list-style: none;
    float: left;
    margin-right: 1.5%;
    margin-bottom: 20px;
}
.top2 img{
    width: 100%;
    height: auto;
}
.top2 .nm{
    font-size: 14px;
    font-weight: 600;
    color: black;
    padding-top: 10px;
}
.top2 span{
    padding-top: 8px;
    font-size: 12px;
    color: rgb(135, 135, 135);  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: block;
}

.hot{
    width: 96%;
    height: 50vh;
    margin-left: 2%;
    margin-top: 2%;
}
.hot .more{
    float: right;
    padding-right: 6%;
}
.hot li{
    width: 13%;
    list-style: none;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
}
.hot img{
    width: 100%;
    height: 220px;
}
.hot p{
    font-size: 12px;  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align: center;
}
.hot .nm{
    font-size: 14px;
    color: black;
}
.hot span{
    padding-bottom: 4px;
    font-size: 12px;
    color: rgb(135, 135, 135);  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: block;
    /* text-align: center; */
}
h1{
    font-size: 20px;
    font-weight: 600;
}
</style>